<template>
    <div id="bought">
        <p class="page-title">
            我买到的宝贝

        </p>
        <div class="container padder">
            <div class="filter">
                <el-form :inline="true">
                    <el-form-item label="">
                        <el-date-picker
                                v-model="searchForm.time"
                                type="daterange"
                                start-placeholder="开始日期"
                                range-separator="至"
                                end-placeholder="结束日期"
                                value-format="timestamp"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="">
                        <el-select
                                v-model="searchForm.da_leimu_id"
                                type="date"

                                placeholder="选择类目">
                            <el-option v-for="item in $store.state.indexTypes.da_fenlei_data"
                                       :key="item.Id"
                                       :label="item.fenlei_mingcheng"
                                       :value="item.Id"

                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入关键词" v-model="searchForm.shangping_mingcheng"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-input placeholder="请输入订单号" v-model="searchForm.ddh"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getBoughts" :loading="tableLoading">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table">
                <div class="header">
                    <div class="pro">宝贝</div>
                    <div class="num">数量</div>
                    <div class="price">实付款</div>
                    <div class="status">交易状态</div>
                    <div class="action">操作</div>
                </div>
                <div class="tbody" v-if="tableData.length" v-loading="tableLoading">
                    <div class="item" v-for="item in tableData" :key="item.ddh">
                        <div class="info">
                            <span>订单号：{{item.ddh}}</span>
                            <span>交易时间：{{item.create_time}}</span>
                        </div>
                        <div class="col">
                            <div class="pro">
                                <el-image :src="item.shangping_tupian">
                                    <div slot="placeholder" class="placeholder">
                                        <i class="el-icon-loading"></i>
                                    </div>
                                </el-image>
                                <div class="r">
                                    <div class="name" @click="$router.push({name:'productDetail',query:{id:item.guishu_shangping_id}})">{{item.shangping_mingcheng}}</div>
                                    <div class="prop">
                                        <span class="rmb text-danger">{{(item.shangping_danjia / 100).toFixed(2)}}</span>
                                        <span>类目：{{brandStr(item.fenlei_da)}}/{{subBrandStr(item.fenlei_xiao)}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="num">{{item.goumai_shuliang}}</div>
                            <div class="price rmb">{{(item.chengjiao_zongjia / 100).toFixed(2)}}</div>
                            <div class="status">{{item.dingdan_zhuangtai | statusToStr}}</div>
                            <div class="action">
                                <el-button type="text" size="small" @click="getPass(item)">提取卡密
                                </el-button>


                                <el-button type="text" v-if="item.dingdan_zhuangtai === 2" size="small"
                                           @click="ratedDialog = true;rateForm.ddh = item.ddh">评价
                                </el-button>
                                <el-button type="text" v-if="item.dingdan_zhuangtai === 1" size="small"
                                           @click="afterDialog = true;afterForm.ddh = (item.ddh)">申请售后
                                </el-button>
                                <el-button type="text" v-if="item.dingdan_zhuangtai === 1" size="small"
                                           @click="sure(item.ddh)">确认
                                </el-button>
                            </div>
                        </div>

                    </div>


                </div>
                <div v-else class="text-center padder-v">暂无数据</div>
            </div>
            <pagination :total="total" v-if="total>0" :options="searchForm" @change="changePage"></pagination>

            <!--卡密dialog-->
            <el-dialog
                    title="查看卡密"
                    :visible.sync="passDialog"
                    width="30%"
                    class="km"
            >
                <div>
                    <div v-for="item in kami_xinxi" class="m-b">
                        <div>卡号：{{item.kahao}}</div>
                        <div>卡密：{{item.kami}}</div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="passDialog = false">取 消</el-button>
                     <el-button type="primary" @click="passDialog = false">确 定</el-button>
                 </span>
            </el-dialog>
            <!--评价-->
            <el-dialog
                    title="评价"
                    :visible.sync="ratedDialog"
                    width="30%"
            >


                <div class="totalRate">
                    <span>总体评价：</span>
                    <div v-for="item in totalRates" @click="setTotalRate(item.value)" :key="item.value"
                         :class="{active:rateForm.pinjia_leixing === item.value}">
                        <i :class="item.icon"></i>
                        <span class="name">{{item.label}}</span>
                    </div>

                </div>
                <el-input type="textarea" v-model="rateForm.pinjia_neirong" placeholder="请输入您的评价" rows="6"
                          class="m-b"></el-input>
                <div class="rated">
                    <div class="rate">
                        <div class="r-item">
                            商品质量：
                            <el-rate
                                    v-model="rateForm.canpin_zhiliang"
                                    show-text>
                            </el-rate>
                        </div>
                        <div class="r-item">
                            成交速度：
                            <el-rate
                                    v-model="rateForm.chengjiao_sudu"
                                    show-text>
                            </el-rate>
                        </div>
                        <div class="r-item">
                            服务态度：
                            <el-rate
                                    v-model="rateForm.fuwu_taidu"
                                    show-text>
                            </el-rate>
                        </div>
                    </div>
                    <div class="text">

                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="ratedDialog = false">取 消</el-button>
                     <el-button type="primary" @click="rate">确 定</el-button>
                 </span>
            </el-dialog>
            <!--申请售后-->
            <el-dialog :title="`申请售后：`+afterForm.ddh" :visible.sync="afterDialog" width="30%">
                <div class="r-item m-b">
                    退款原因：
                    <el-select v-model="afterForm.tuikuan_yuanying">
                        <el-option v-for="item in reason" :label="item.name"
                                   :value="item.value"
                                   :key="item.value"></el-option>
                    </el-select>
                </div>

                <el-input type="textarea" rows="6" v-model="afterForm.tuikuan_liyou" placeholder="请输入退款理由 "></el-input>

                <span slot="footer" class="dialog-footer">
                  <el-button @click="afterDialog = false">取 消</el-button>
                     <el-button type="primary" @click="after" :loading="afterLoading">确 定</el-button>
                 </span>
            </el-dialog>
        </div>

    </div>
</template>

<script>


    export default {
        name: 'bought',
        components: {},

        data() {
            return {
                value: null,
                //评价提交表单
                rateForm: {
                    ddh: '',
                    pinjia_neirong: '',
                    pinjia_leixing: 3,
                    fuwu_taidu: 5,
                    chengjiao_sudu: 5,
                    canpin_zhiliang: 5
                },
                totalRates: [
                    {
                        icon: 'iconfont icon-chaping',
                        value: 1,
                        label: '差评'
                    },
                    {
                        icon: 'iconfont icon-zhongping',
                        value: 2,
                        label: '中评'
                    },
                    {
                        icon: 'iconfont icon-haoping',
                        value: 3,
                        label: '好评'
                    },
                ],
                reason: [
                    {
                        name: '卡密,卡号,账号不存在',
                        value: 1
                    },
                    {
                        name: '软件,商品无法正常使用',
                        value: 2
                    },
                    {
                        name: '其他原因',
                        value: 3
                    },
                ],
                //申请售后提交表单
                afterForm: {
                    ddh: '',
                    tuikuan_yuanying: 2,
                    tuikuan_liyou: '',

                },
                afterLoading: false,
                value1: '',
                total: 0,
                passDialog: false,
                ratedDialog: false,
                tableLoading: false,
                afterDialog: false,
                searchForm: {
                    da_leimu_id: '',
                    page: 1,
                    ddh: '',
                    shangping_mingcheng: '',
                    time: '',
                    pageSize:4
                },
                tableData: [],
                typeList: {
                    da_fenlei_data: [],
                    xiao_fenlei_data: []
                },
                kami_xinxi: ''
            }
        },
        computed: {},
        filters: {
            statusToStr(val) {
                let obj = {
                    1: '交易开始，等待确认收货',
                    2: '确认收货完毕，待评价',
                    3: '评价完毕',
                    4: '售后中',
                    5: '订单关闭',
                };

                return obj[val]
            },

        },
        methods: {
            //选择总体评价
            setTotalRate(value) {
                console.log(value)
                this.rateActive = value;
            },
            //大分类字符
            brandStr(val) {
                if (val) {
                    return this.typeList.da_fenlei_data.filter(item => {
                        return item.Id === val
                    })[0].fenlei_mingcheng
                }

            },
            //小分类字符
            subBrandStr(val) {
                if (val) {
                    return this.typeList.xiao_fenlei_data.filter(item => {
                        return item.Id === val
                    })[0].fenlei_mingcheng
                }

            },
            //翻页
            changePage() {
                this.getBoughts();
                // console.log(this.searchForm)
            },
            //获取卡密
            getPass(row) {
                this.passDialog = true;
                this.kami_xinxi = row.kami_xinxi
            },
            //确认
            sure(ddh) {
                this.$confirm('确认收货后钱会自动转入对方账户们是否确定?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            this.$axios.post(`/api/user/queren_shouhuo`, {ddh})
                                .then(res => {
                                    done();
                                    instance.confirmButtonLoading = false;
                                    if (res.code === `200`) {
                                        this.$message.success('操作成功');

                                        this.getBoughts();
                                    }
                                })
                        } else {
                            done();
                        }
                    }
                }).then(() => {

                })
            },
            //评价
            rate() {
                this.$axios.post(`/api/user/haoping`, this.rateForm)
                    .then(res => {
                        if (res.code === `200`) {
                            this.$message.success('评价成功');
                            this.getBoughts()
                        }
                    })
            },

            //售后
            after() {
                this.afterLoading = true;
                this.$axios.post(`/api/user/shenqing_shouhou`, this.afterForm)
                    .then(res => {
                        this.afterLoading = false;
                        if (res.code === `200`) {
                            this.afterDialog = false;
                            this.$message.success('申请售后成功！');
                            this.$router.push('/buyer/issue')
                        }
                    })
            },
            //获取购买列表
            getBoughts() {
                this.tableLoading = true;
                return this.$axios.post(`/api/user/get_i_baobei`, this.searchForm)
                    .then(res => {
                        this.tableLoading = false
                        if (res.code === `200`) {
                            this.tableData = res.data.dingdan_data;
                            this.total = res.data.shuliang
                        }
                    })
            },
            //获取商品分类
            getType() {
                return new Promise(resolve => {
                    this.$axios.post(`/api/user/get_fenlei`, this.searchForm)
                        .then(res => {
                            resolve()
                            if (res.code === `200`) {
                                this.typeList = res.data;
                                this.typeList.da_fenlei_data.unshift({
                                    Id: '',
                                    fenlei_mingcheng: '全部'
                                })
                            }
                        })
                })
            }
        },
        async created() {
            await this.getType();
            this.getBoughts()
        },
    }
</script>

<style lang="less" scoped>
    .totalRate {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        div {
            cursor: pointer;
            color: #ccc;
            display: flex;
            align-items: center;
            margin-right: 20px;
            transition: .3s;
            &:hover, &.active {
                color: rgb(247, 186, 42);
                transform: scale(1.15);
            }
        }
        .iconfont {
            font-size: 25px;
            margin-right: 5px;
        }
    }

    .table {
        .header {
            background: #fafbfc;
            line-height: 3;
            position: sticky;
        }
        .header, .col {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            & > div {
                padding: 0 10px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .pro {
                flex: 2;

            }
            .num, .status, .price {
                flex: 1;

            }
            .action {
                flex: 1.5;
            }
        }
        .tbody {
            .item {
                border-top: 1px solid #ccc;
                .info {
                    background: #fafbfc;
                    padding: 10px;
                    span {
                        margin-right: 15px;
                    }
                }
                .col {
                    padding: 8px 0;
                    .pro {
                        display: flex;
                        text-align: left;
                        justify-content: space-between;
                        align-items: stretch;
                        /deep/ .el-image {
                            width: 120px;
                            margin-right: 15px;
                            border-radius: 5px;
                            height: 80px;
                            object-fit: contain;
                        }
                        .r {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            flex: auto;
                            .name {
                                color: #409EFF;
                                font-size: 14px;
                                cursor: pointer;
                            }
                            .prop {
                                margin-top: 15px;
                                display: flex;
                                justify-content: space-between;

                            }
                        }
                    }
                    .pro, .num, .status, .price {
                        border-right: 1px solid #ccc;
                    }
                    .price {
                        color: #FF4400;
                        font-size: 20px;
                        font-weight: bolder;

                    }

                }
            }
        }
    }

    .rated {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        .rate {
            flex: 1;
            .r-item {
                display: flex;
                &:not(:last-child) {
                    margin-bottom: 15px;
                }
            }
        }
        .text {
            flex: 1.2;
            /deep/ .el-textarea {
                height: 100%;
                .el-textarea__inner {
                    height: 100%;
                }
            }

        }
    }

    .pagination {
        margin-top: 50px;
        text-align: center;
    }
</style>
